<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/WEB-INF/templates/master.xhtml">
	<ui:define name="content">
		
	<p:dialog header="Agregar Nuevo Puesto" id="dialogNuevoPuesto" modal="true" resizable="false" 
			widgetVar="dlgNuevoPuesto" hideEffect="fade"  styleClass="panel-azul" width="650" height="350" >
	<h:form>
	
<p:growl id="msjNuevo"  showDetail="true" autoUpdate="true"/> 
	<p:wizard backLabel="Atras" nextLabel="Siguiente" widgetVar="wizardNuevo">
	<p:tab title="An&aacute;lisis">
	<p:panel style="width:580px;height:250px">
	<h:panelGrid columns="1" >
	<f:facet name="header">Epecifique el an&aacute;lisis  del puesto </f:facet>
	<h:outputLabel value="Nro. Hoja Informativa:" />
	<h:inputText value="#{puestoUnidadMB.puestoSelected.puestoCab.numHojaInf}" />
	<h:panelGrid columns="1">
	<h:outputLabel value="Mision" />
	<h:inputTextarea value="#{puestoUnidadMB.mision}" required="true" requiredMessage="Ingrese la Mision" cols="100" rows="3"/>
	<h:outputLabel value="Funciones :" />
	<h:inputTextarea value="#{puestoUnidadMB.funciones}" required="true" requiredMessage="Ingrese las funciones" cols="100" rows="3"/>
	</h:panelGrid>
	
	</h:panelGrid>
	
	</p:panel>
	</p:tab>
	
	
	<p:tab title="Puesto">
	<p:panel style="width:580px;height:250px">
	<h:panelGrid columns="2" >
	<f:facet name="header">Epecifique los datos del puesto </f:facet>
	<h:outputLabel value="Unidad Organica :" />
	<h:selectOneMenu value="#{puestoUnidadMB.puestoSelected.idUnidadOrganica.idUnidadOrganica}" >
	<!--f:selectItem itemValue="#{null}" itemLabel=" - Seleccione - " rendered="#{not empty puestoUnidadMB.uoSelected.dependienteList}"/-->
	<f:selectItem itemValue="#{puestoUnidadMB.uoSelected.idUnidadOrganica}" itemLabel="#{puestoUnidadMB.uoSelected.nombreUnidad}"/>
	<f:selectItems value="#{puestoUnidadMB.uoSelected.dependienteList}" var="uo" itemValue="#{uo.idUnidadOrganica}" itemLabel="#{uo.nombreUnidad}"/>
	</h:selectOneMenu>
	<h:outputLabel value="Cargo :" />
	<h:selectOneMenu value="#{puestoUnidadMB.puestoSelected.idCargo.idCargo}" style="width:250px" required="true" requiredMessage="Seleccione el cargo">
	<f:selectItem itemValue="#{null}" itemLabel="Seleccione el Cargo"/>
	<f:selectItems value="#{parametroMB.cargosLista}" var="cargo" itemValue="#{cargo.idCargo}" itemLabel="#{cargo.descripcion}"/>
	</h:selectOneMenu>
	<h:outputLabel value="Descripcion puesto:" />
	<h:inputText value="#{puestoUnidadMB.puestoSelected.nombre}" style="width:200px" onblur="value=value.toUpperCase()"/>
	<h:outputLabel value="Desponibilidad viaje :" />
	<h:selectBooleanCheckbox value="#{puestoUnidadMB.disponibilidadViaje}" />
	<h:outputLabel value="Superior Inmediato :" />
	<h:selectOneMenu value="#{puestoUnidadMB.puestoSelected.superiorInmediato.idPuesto}" style="width:280px">
	<f:selectItem itemValue="#{null}" itemLabel="Seleccione el superior"/>
	<f:selectItems value="#{puestoUnidadMB.puestosInmediatos}" var="puesto" itemValue="#{puesto.idPuesto}" itemLabel="#{puesto.nombre} - #{puesto.idUnidadOrganica.nombreUnidad}"/>
	</h:selectOneMenu>
	
	
	</h:panelGrid>
	
	</p:panel>
	</p:tab>
	
	<p:tab title="Nivel estudios">
	<p:panel style="width:580px;height:250px">
	<h:panelGrid columns="1">
	<f:facet name="header">Epecifique los estudios y grados para este puesto </f:facet>
	<h:panelGrid columns="5">
		<p:outputLabel value="Estudio" for="eSupCond"/>
		<p:outputLabel value="Grado" for="eSupGrado"/>
		<h:outputLabel value=""/>
		<h:outputLabel value=""/>
		<h:outputLabel value=""/>
		<h:selectOneMenu id="eSupCond" value="#{puestoUnidadMB.puestoEducacion.estudio.idCondEstudio}" style="width:210px">
		<f:selectItems  value="#{parametroMB.condicionEstudios}"/>
		</h:selectOneMenu>
	
		<h:selectOneMenu id="eSupGrado" value="#{puestoUnidadMB.puestoEducacion.nivel.idAdmGrado}" style="width:210px">
		<f:selectItems  value="#{parametroMB.gradosAcademicos}"/>
	</h:selectOneMenu>
	<p:commandButton value="Agregar" process="@form" action="#{puestoUnidadMB.addEstudioNuevoPuesto}" update="dtEducacionLstNuevo"/>
	<p:commandButton value="Quitar" process="@form"  onclick="if(checkSelectedRow(dtEducacionLstNuevoWidget)==false)return false;" action="#{puestoUnidadMB.quitarPuestoEducacion}" update="dtEducacionLstNuevo"/>
	
	</h:panelGrid>
	<p:dataTable id="dtEducacionLstNuevo" value="#{puestoUnidadMB.puestoSelected.idPuestoAnalisis.puestoEducacionList}"  widgetVar="dtEducacionLstNuevoWidget"
	paginator="true" paginatorAlwaysVisible="false" paginatorPosition="bottom" rowIndexVar="idx"
	var="puestoEducacion" rows="5" rowKey="#{puestoEducacion}" selectionMode="single" selection="#{puestoUnidadMB.puestoEducacionSelected}">
	<p:column headerText="item">
	<h:outputText value="#{idx+1}" />
	</p:column>
	<p:column headerText="Nivel de Estudios">
	<h:outputLabel value="#{puestoEducacion.estudio.denominacion}" />
	</p:column>
	<p:column headerText="Grado Profesion">
	<h:outputLabel value="#{puestoEducacion.nivel.denominacion}" />
	</p:column>
	</p:dataTable>

	</h:panelGrid>
		<p:commandButton value="Registrar"  update=":pnlUO" action="#{puestoUnidadMB.registrar}" oncomplete="handleRequestDefault(xhr, status, args,dlgNuevoPuesto);"/>
	</p:panel>
	</p:tab>
		
	
	
	</p:wizard>
	
	
		</h:form>
	
	</p:dialog>
	
<p:panel  header="Asignaci&oacute;n de Puestos" style="width:960px;height:500px" styleClass="panel-azul">
	<h:panelGrid columns="5">
	<h:form>
	<p:commandButton id="selBtn" value="Seleccionar Unidad Organica" type="button"/>
	<p:overlayPanel for="selBtn" hideEffect="fade" widgetVar="overLaySelect">
	
	<p:tree value="#{puestoUnidadMB.arbolUO}" var="node" style="height:400px;" selection="#{puestoUnidadMB.nodeUOSelected}"  selectionMode="single">
	 	<p:ajax event="select" update=":pnlUO" listener="#{puestoUnidadMB.onNodeUOSelect}" oncomplete="overLaySelect.hide();"></p:ajax>
		<p:treeNode id="treeNode" >  
            <h:outputText value="#{node.nombreUnidad}" id="lblNode"/>  
        </p:treeNode>  
	</p:tree>
	</p:overlayPanel>
	</h:form>
	
		<ui:include src="/resources/includes/ajaxStatus.xhtml"/>
	</h:panelGrid>
	
	<p:panel id="pnlUO" header="Unidad Organica Seleccionada: #{puestoUnidadMB.uoSelected.nombreUnidad}" styleClass="panel-azul">
	
	<h:outputLabel value="No hay ningun puesto asignado para la unidad seleccionada" rendered="#{puestoUnidadMB.visibleDetalle==false}" />
	<h:outputLabel value="Relaci&oacute;n de Puestos" rendered="#{puestoUnidadMB.visibleDetalle==true}" />
	
	<h:panelGrid  columns="2" styleClass="layout-form" cellspacing="5">

	<h:form>
	<p:tree value="#{puestoUnidadMB.arbolPuestosUO}"  var="puesto" style="height:400px;width:300px" selection="#{puestoUnidadMB.nodePuestoSelected}"  selectionMode="single">
	 	<p:ajax event="select" update=":pnlDetalle" listener="#{puestoUnidadMB.onNodePuestoSelect}" onstart="blocker.show()"  oncomplete="blocker.hide()"></p:ajax>
		<p:treeNode id="treeNode" >  
            <h:outputText value="#{puesto.nombre}" id="lblNode"/>  
        </p:treeNode>  
		
	</p:tree>
	
	</h:form>
		
	<h:panelGrid   columns="1" styleClass="layout-form" style="width:500px"   >
	
	<p:panel id="pnlDetalle" rendered="#{puestoUnidadMB.visibleDetalle}" header="#{puestoUnidadMB.puestoEdicionSelected.nombre}">
	<p:growl id="msjEdicion" showDetail="true"/>
	<p:tabView id="tabEdicion" widgetVar="tabEdicionWidget" styleClass="tabview-cgr">
	<p:tab title="Puesto">
	<h:form>
	<h:panelGrid columns="2">
	<h:outputLabel value="Id Puesto :" /><h:inputText value="#{puestoUnidadMB.puestoEdicionSelected.idPuesto}" disabled="true"/>
	<h:outputLabel value="Cargo :" />
	<h:selectOneMenu value="#{puestoUnidadMB.puestoEdicionSelected.idCargo.idCargo}">
	<f:selectItem itemValue="#{null}" itemLabel="Seleccione el Cargo"/>
	<f:selectItems value="#{parametroMB.cargosLista}" var="cargo" itemValue="#{cargo.idCargo}" itemLabel="#{cargo.descripcion}"/>
	</h:selectOneMenu>
	<h:outputLabel value="Descripcion puesto:" />
	<h:inputText value="#{puestoUnidadMB.puestoEdicionSelected.nombre}" style="width:250px" onblur="value=value.toUpperCase()"/>
	<h:outputLabel value="Desponibilidad viaje :" />
	<h:selectBooleanCheckbox value="#{puestoUnidadMB.disponibilidadViaje}" />
	<h:outputLabel value="Superior Inmediato :" />
	<h:selectOneMenu value="#{puestoUnidadMB.puestoEdicionSelected.superiorInmediato.idPuesto}" style="width:280px">
	<f:selectItem itemValue="#{null}" itemLabel="Seleccione el superior"/>
	<f:selectItems value="#{puestoUnidadMB.puestosInmediatos}" var="puesto" itemValue="#{puesto.idPuesto}" itemLabel="#{puesto.nombre} - #{puesto.idUnidadOrganica.nombreUnidad}"/>
	</h:selectOneMenu>
	</h:panelGrid>
	
	<p:commandButton value="Actualizar"  action="#{puestoUnidadMB.updatePuesto}" update=":msjEdicion" />
	</h:form>
	</p:tab>
	<p:tab title="Profesi&oacute;n">
	<h:form>
	<h:panelGrid>
	<h:panelGrid columns="4">
		<p:outputLabel value="Estudio" for="eSupCond"/>
		<p:outputLabel value="Grado" for="eSupGrado"/>
		<h:outputLabel value=""/>
		<h:outputLabel value=""/>
		<h:selectOneMenu id="eSupCond" value="#{puestoUnidadMB.puestoEducacion.estudio.idCondEstudio}" style="width:180px">
		<f:selectItems  value="#{parametroMB.condicionEstudios}"/>
		</h:selectOneMenu>
		<h:selectOneMenu id="eSupGrado" value="#{puestoUnidadMB.puestoEducacion.nivel.idAdmGrado}" style="width:170px">
		<f:selectItems  value="#{parametroMB.gradosAcademicos}"/>
	</h:selectOneMenu>
	<p:commandButton value="Agregar" process="@form" action="#{puestoUnidadMB.updateEstudioPuesto}" update="dtEducacionLst,:msjEdicion "/>
	<p:commandButton value="Quitar" process="@form"  onclick="if(checkSelectedRow(dtEducacionLstWidget)==false)return false;"  action="#{puestoUnidadMB.eliminarEstudioPuesto}" update="dtEducacionLst,:msjEdicion"/>
	
	</h:panelGrid>
	<p:dataTable id="dtEducacionLst" value="#{puestoUnidadMB.puestoEdicionSelected.idPuestoAnalisis.puestoEducacionList}" widgetVar="dtEducacionLstWidget"
	paginator="true" paginatorAlwaysVisible="false" paginatorPosition="bottom" rowIndexVar="idx"
	var="puestoEducacion" rows="5" rowKey="#{puestoEducacion}"  selection="#{puestoUnidadMB.puestoEducacionSelected}">
	<p:column headerText="item">
	<h:outputText value="#{idx+1}" />
	</p:column>
	<p:column headerText="Nivel de Estudios">
	<h:outputLabel value="#{puestoEducacion.estudio.denominacion}" />
	</p:column>
	<p:column headerText="Grado Profesion">
	<h:outputLabel value="#{puestoEducacion.nivel.denominacion}" />
	</p:column>
	<p:column selectionMode="single">
	</p:column>
	</p:dataTable>



	</h:panelGrid>
	</h:form>
	
	
	</p:tab>
	
	
	</p:tabView>
	 <p:blockUI block="tabEdicion" widgetVar="blocker">
	  <h:graphicImage value="#{resource['images:ajax-loader.gif']}" />  
	 </p:blockUI> 
</p:panel> 
	<br/>
	<p:commandButton value="Nuevo Puesto" immediate="true" action="#{puestoUnidadMB.nuevo}" oncomplete="dlgNuevoPuesto.show();wizardNuevo.loadStep(wizardNuevo.cfg.steps[0], true)"  />
	</h:panelGrid>
	
	</h:panelGrid>
		
	</p:panel>
	
</p:panel>
	
		<script type= "text/javascript">
	//<![CDATA[
	function habilitarTabs(){
	
		var i=tabEdicionWidget.getLength();
    	for(var x=0;x<i;x++){
        	console.log(x);
    		tabEdicionWidget.enable(x);
        }
		
		}
	//]]>
</script>
	</ui:define>

</ui:composition>

</html>